<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String base = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
%>
<style>
	.list-group-item{
		cursor: pointer;
		border: 0px solid!important;
	}
	h4:hover{
		transform: scale(1.4);
	}
	a{
	text-decoration:none!important;
	}
	
</style>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<div class="row">
	<div id="tipsAlert" class="alert alert-success alert-dismissible"
		role="alert" hidden="hidden">
		<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
		<strong>Warning!</strong>
	</div>
	<div class="page-header">
		<h3 style="display: inline;">
			新增碎片 <small>add new fragment</small>
		</h3>
	</div>
	<div class="container">
		<div class="row">
			<div class="col-md-2">
				<div data-spy="affix" data-offset-top="60">
					<ul class="list-group">
						<li class="list-group-item">
						<h4>
							<span class="glyphicon glyphicon-forward" aria-hidden="true"></span>&nbsp;<a href="javascript:fragment.add()">提交</a>
						</h4></li>
						<li class="list-group-item">
						<h4>
							<span class="glyphicon glyphicon-forward" aria-hidden="true"></span>&nbsp;<a href="javascript:fragment.preview()">预览</a>
						</h4></li>
						<li class="list-group-item">
						<h4>
							<span class="glyphicon glyphicon-forward" aria-hidden="true"></span>&nbsp;<a href="/catagory/${catagoryInfo.catagory.catagoryId }">返回</a>
						</h4></li>
					</ul>
				</div>
			</div>
			<div class="col-md-10">
				<input id="fragment_catagoryId" class="input-sm"
					value="${catagoryInfo.catagory.catagoryId }" hidden="hidden" />
				<div class="row">
					<div class="col-md-12">
						<div class="input-group">
							<span class="input-group-addon">种类</span>
							<input type="text" class="form-control" value="${catagoryInfo.catagory.name }" disabled="disabled">
						</div>
						<hr />
						<div class="input-group">
							<span class="input-group-addon">标题</span> <input
								id="fragment_title" type="text" class="form-control"
								placeholder="title" aria-describedby="sizing-addon1">
						</div>
						<hr />
						<div class="input-group">
							<span class="input-group-addon">内容</span>
							<textarea id="fragment_content" style="width: 100%" rows="15"></textarea>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</div>
<div id="previewFragment" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog">
	<div class="modal-dialog modal-lg" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="preview_title"></h4>
			</div>
			<div class="modal-body">
				<pre><code id="preview_content"></code></pre>
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
			</div>
		</div>
	</div>
</div>
<script src="<%=base %>/js/catagory.js"></script>
<script>


	$(function() {
		$('#previewFragment').on('show.bs.modal', function(e) {
			$('pre code').each(function(i, block) {
				hljs.highlightBlock(block);
			});
		});
	});
</script>